<template>
  <div class="page index" ref="page">
    <van-nav-bar title="创建任务" left-text="返回" left-arrow @click-left="$router.back();" />
    <!--<my-head :topTitle="topTitle" :showLeft="showLeft"></my-head>-->
    <van-form validate-first class="form">
      <van-field
              v-model="task.title"
              name="任务标题"
              label="任务标题"
              required
              placeholder="请输入任务标题"
              :rules="[{ required: true, message: '请输入任务标题' }]"
      />
      <van-field
              v-model="task.appname"
              name="App名称"
              label="App名称"
              placeholder="请输入App名称"
              :rules="[{ required: true, message: '请输入App名称' }]"
      />
      <van-field
              v-model="task.money"
              name="单个金额"
              label="单个金额"
              required
              type="number"
              placeholder="请输入单个金额"
              :rules="[{ required: true, message: '请输入单个金额' }]"
      />
      <van-field
              v-model="task.number"
              name="任务数量"
              label="任务数量"
              type="digit"
              required
              placeholder="请输入任务数量"
              :rules="[{ required: true, message: '请输入任务数量' }]"
      />
      <van-field
              v-model="task.content"
              name="任务介绍"
              label="任务介绍"
              required
              rows="3"
              autosize
              maxlength="50"
              show-word-limit
              type="textarea"
              placeholder="请填写该任务如何完成"
              :rules="[{ required: true, message: '请输入任务介绍' }]"
      />
      <van-field name="uploader" label="介绍示例图">
        <template #input>
          <van-uploader :before-read="uploadFile" v-model="task.contenturlsShow"  :before-delete="deleteFile" :max-count="2"/>
        </template>
      </van-field>
      <van-field
              v-model="task.detail"
              name="任务链接"
              label="任务链接"
              placeholder="请填写链接或口令，可不填"
      />
      <van-field
              v-model="task.checkcontent"
              name="验证任务"
              label="验证任务"
              type="textarea"
              rows="3"
              autosize
              maxlength="50"
              show-word-limit
              required
              placeholder="向接单人说明：需要向您提供说明样的验证图"
              :rules="[{ required: true, message: '请输入任务验证' }]"
      />
      <van-field name="task" label="验证示例图">
        <template #input>
          <van-uploader :before-read="uploadFile2" v-model="task.checkurlsShow" :before-delete="deleteFile2" :max-count="2"/>
        </template>
      </van-field>
      <van-submit-bar
              :disabled="isLoading"
              :price="totalprice"
              button-text="提交订单"
              :tip="subTip"
              tip-icon="info-o"
              @submit="submit"
      />
    </van-form>
  </div>
</template>
<script >
  import api from "../../api";
export default {
  name: "product",
  data() {
    return {
      showLeft:true,
      topTitle:'公车出行申请',
      task:{
        checkurlsArr:[],
        contenturlsArr:[]
      },
      subTip:'',
      isLoading: false,
    };
  },
  mounted() {
    // this.loadData();
  },
  computed: {
    totalprice:function(){
       if(this.task.number && this.task.money && this.task.number>0&&this.task.money>0){
        return this.task.number*100*this.task.money;
       }else{
         return 0;
       }
    }
  },
  methods: {
    loadData() {
    },
    uploadFile(file){
      console.log('上传文件前置')
      api.upload("file/upload",file)
              .then(json => {
                this.task.contenturlsArr.push(json)
                return true;
              })
              .catch(error => {
                this.$toast.fail("请求服务器异常");
                console.log("error:", error);
                return false;
              });
      return true;
    },
    uploadFile2(file){
      console.log('上传文件前置')
      api.upload("file/upload",file)
              .then(json => {
                this.task.checkurlsArr.push(json)
                return true;
              })
              .catch(error => {
                this.$toast.fail("请求服务器异常");
                console.log("error:", error);
                return false;
              });
      return true;
    },
    deleteFile(file,detail){
      this.task.contenturlsArr.splice(detail.index)
      return true;
    },
    deleteFile2(file,detail){
      this.task.checkurlsArr.splice(detail.index)
      return true;
    },
    submit() {
      // if (!this.username) {
      //   this.$toast.fail("请填写用户名");
      //   return;
      // }
      // if (!this.password) {
      //   this.$toast.fail("请填写登录密码");
      //   return;
      // }
      this.isLoading = true;
      this.task.checkurls  = this.task.checkurlsArr.join(',')
      this.task.contenturls  = this.task.contenturlsArr.join(',')
      api.post("task/save",this.task)
              .then(json => {
                console.log(9999999999)
                console.log(json)
                this.isLoading = false;
                this.$toast.success("创建任务成功");
                this.$router.go(-1)
              })
              .catch(error => {
                this.isLoading = false;
                console.log("error:", error);
              });
    },
  }
};
</script>
<style lang="scss" >
.index {
  overflow-y:scroll;
  .form{
    margin-top: 0.8rem;
    margin-left: 1rem;
    margin-right: 1rem;
    margin-bottom: 3rem;
  }
}
</style>
